<template>
  <div class="wrapper">
    <Table
        border
        size="small"
        height="350"
        :columns="columns"
        ellipsis
        stripe
        :data="dataArr"
        @on-row-dblclick="selectRow"
    >
    </Table>
   <div class="pageWrapper">
     <Page
         :total="total"
         :page-size="pageSize"
         :page-size-opts="pageSizeOption"
         :current="pageNum"
         @on-change="changePageNum"
         @on-page-size-change="changePageSize"
         show-sizer
         show-total
     />
   </div>
  </div>
</template>

<script>
import { materialList } from '@/api/planManage/productionPlan';
export default {
  name: "materialSelect",
  data() {
    return{
      columns: [
        {
          title: "序号",
          type: 'index',
          width: 80,
          align: 'center'
        },
        {
          title: "物料分类",
          key: "materialTypeName",
          minWidth: 250,
          align: "center",
          resizable: true,
          tooltip: true,
        },
        {
          title: "物料编号",
          key: "materialCode",
          minWidth: 130,
          align: "center",
          resizable: true,
          tooltip: true,
        },
        {
          title: "物料名称",
          key: "materialName",
          minWidth: 130,
          align: "center",
          resizable: true,
          tooltip: true,
        },
        {
          title: "物料属性",
          key: "materialPropertiesName",
          minWidth: 100,
          align: "center",
          resizable: true
        },
        {
          title: "规格",
          key: "spec",
          minWidth: 100,
          align: "center",
          resizable: true
        },
        {
          title: "型号",
          key: "model",
          minWidth: 100,
          align: "center",
          resizable: true
        },
        {
          title: "基本单位",
          key: "tmUnitName",
          minWidth: 100,
          align: "center",
          resizable: true
        },
        {
          title: "SNP",
          key: "snp",
          minWidth: 100,
          align: "center",
          resizable: true
        },
        // {
        //   title: "质检方案",
        //   key: "tmTestplanId",
        //   minWidth: 100,
        //   align: "center",
        //   resizable: true
        // },
        {
          title: "有效期（月）",
          key: "periodOfValidity",
          minWidth: 160,
          align: "center",
          resizable: true
        },
        {
          title: "是否免检",
          key: "exemptionInspectionFlag",
          minWidth: 100,
          align: "center",
          resizable: true,
          render: (h, params) => {
            return h(
                "div",
                params.row.exemptionInspectionFlag === 1 ? '是' : '否'
            );
          },
        },
        {
          title: "是否启用",
          key: "enableFlag",
          minWidth: 100,
          align: "center",
          resizable: true,
          render: (h, params) => {
            return h(
                "div",
                params.row.enableFlag === 1 ? '启用' : '停用'
            );
          },
        },
        {
          title: "是否边线管控",
          key: "ifLineLibraryCtrl",
          width: 130,
          align: "center",
          resizable: true,
          tooltip: true,
          render: (h, params) => {
            return h(
                "div",
                params.row.ifLineLibraryCtrl === 1 ? '是' : '否'
            );
          },
        },
        {
          title: "是否单位管控",
          key: "subunitsCtrlFlag",
          width: 170,
          align: "center",
          resizable: true,
          tooltip: true,
          render: (h, params) => {
            return h(
                "div",
                params.row.subunitsCtrlFlag === 1 ? '是' : '否'
            );
          },
        },
        {
          title: "次单位",
          key: "tmSubunitsName",
          minWidth: 100,
          align: "center",
          resizable: true
        },
        {
          title: "备注",
          key: "memo",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true,
        },
        {
          title: "创建人",
          key: "crtUsrName",
          width: 130,
          align: "center",
          resizable: true,
          tooltip: true,
        },
        {
          title: "创建时间",
          key: "crtTime",
          width: 170,
          align: "center",
          resizable: true,
          tooltip: true,
        },
        {
          title: "更新人",
          key: "updUsrName",
          minWidth: 130,
          align: "center",
          resizable: true,
          tooltip: true,
        },
        {
          title: "更新时间",
          key: "updTime",
          minWidth: 170,
          align: "center",
          resizable: true,
          tooltip: true,
        }
      ],
      dataArr: [],
      total: 0,
      pageSize: 10,
      pageSizeOption: [10, 20, 30, 40],
      pageNum: 1
    }
  },
  methods: {
    // 双击选中
    selectRow(row) {
      this.$emit('change', row);
      document.body.click();
    },
    changePageNum(pageNum) {
      this.pageNum = pageNum;
      this.getList()
    },
    changePageSize(pageSize){
      this.pageSize = pageSize
      this.getList()
    },
    getList () {
      materialList({
        enableFlag: 1,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        if(res.code === 200){
          this.dataArr = res.data.list;
          this.total = res.data.total;
        }
      })
    }
  },
  created(){
    this.getList()
  }
}
</script>

<style scoped lang="scss">
.wrapper{
  width: 800px;
  height: 430px;
  padding: 15px;
  .pageWrapper{
    padding-top: 15px;
    text-align: right;
  }
}
</style>
